<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Alert - A11y</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>
  <script type="module">
    import { alertController } from '../../../../dist/ionic/index.esm.js';
    window.alertController = alertController;
  </script>

  <body>
    <main class="ion-padding">
      <h1>Alert - A11y</h1>

      <button class="expand" id="bothHeadersOnly" onclick="presentBothHeadersOnly()">Both Headers Only</button>
      <button class="expand" id="headerOnly" onclick="presentHeaderOnly()">Header Only</button>
      <button class="expand" id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</button>
      <button class="expand" id="noHeaders" onclick="presentNoHeaders()">No Headers</button>
      <button class="expand" id="headersAndMessage" onclick="presentHeadersAndMessage()">Headers and Message</button>
      <button class="expand" id="customAria" onclick="presentCustomAria()">Custom Aria</button>
      <button class="expand" id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</button>
      <button class="expand" id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
    </main>

    <script>
      async function openAlert(opts) {
        const alert = await alertController.create(opts);
        await alert.present();
      }

      function presentBothHeadersOnly() {
        openAlert({
          header: 'Header',
          subHeader: 'Subtitle',
          buttons: ['OK'],
        });
      }

      function presentHeaderOnly() {
        openAlert({
          header: 'Header',
          buttons: ['OK'],
        });
      }

      function presentSubHeaderOnly() {
        openAlert({
          subHeader: 'Subtitle',
          buttons: ['OK'],
        });
      }

      function presentNoHeaders() {
        openAlert({
          message: 'This is an alert message.',
          buttons: ['OK'],
        });
      }

      function presentHeadersAndMessage() {
        openAlert({
          header: 'Header',
          subHeader: 'Subtitle',
          message: 'This is an alert message.',
          buttons: ['OK'],
        });
      }

      function presentCustomAria() {
        openAlert({
          header: 'Header',
          subHeader: 'Subtitle',
          message: 'This is an alert message with custom aria attributes.',
          buttons: ['OK'],
          htmlAttributes: {
            'aria-labelledby': 'Custom title',
            'aria-describedby': 'Custom description',
          },
        });
      }

      function presentAriaLabelButton() {
        openAlert({
          header: 'Header',
          subHeader: 'Subtitle',
          message: 'This is an alert message with custom aria attributes passed to the button.',
          buttons: [
            {
              text: 'Close',
              htmlAttributes: {
                'aria-label': 'close button',
                'aria-labelledby': 'close-label',
              },
            },
          ],
        });
      }

      function presentAlertCheckbox() {
        openAlert({
          header: 'Checkbox',
          inputs: [
            {
              type: 'checkbox',
              label: 'Checkbox 1',
              value: 'value1',
              checked: true,
            },
          ],
          buttons: ['OK'],
        });
      }
    </script>
  </body>
</html>
